<!-- 首页 -->
<template>
  <div class="box">
    <div class="cont-box">
      <!-- <img src="../assets/biimg.png" /> -->
      <div id="cesiumContainer"></div>
    </div>
    <div class="set-div">
      <div class="set-div-left" :id="!show ? 'active' : ''">
        <div @click="show = !show"><a-icon type="left" /></div>
      </div>
      <div class="set-div-right" :id="!show ? 'inshow' : ''">
        <maplayer @add="onadd"></maplayer>
      </div>
    </div>
    <div class="toolbar-box">
      <toolbar @set="onset"></toolbar>
    </div>
    <div class="timeAxis">
      <div
        class="showdiv"
        :id="showtime ? 'actives' : ''"
        @click="showtime = !showtime"
      >
        <a-icon type="up" />
      </div>
      <!-- <div class="timebtn"><a-icon type="pause" /></div> -->
      <div :id="!showtime ? 'show-box-active' : ''" class="show-box">
        <timeAxis></timeAxis>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogexamine"
      width="450px"
      :show-close="true"
    >
      <div class="pop-content">
        <div class="pop-top"><a-icon type="setting" />设置</div>
        <div class="pop-title">期间</div>
        <div class="pop-input">
          <a-input placeholder="请输入" size="small" />
          <a-input placeholder="请输入" size="small" />
        </div>
        <div class="pop-Session">
          <div>登录</div>
          or <span>已登录</span>
        </div>
        <div class="pop-title">地图</div>
        <div class="pop-list">
          <a-checkbox @change="onChange"> 显示 Basemap</a-checkbox>
        </div>
        <div class="pop-list">
          <a-checkbox @change="onChange"> 显示 10° 经纬网</a-checkbox>
        </div>
        <div class="pop-list">
          <a-checkbox @change="onChange">
            默认情况下使用色盲调色板</a-checkbox
          >
        </div>
        <div class="pop-list" style="margin-bottom: 10px">
          投影:
          <select name="" style="width: 210px">
            <option value="">赤道 (EPSG:4326)</option>
            <option value="">赤道 (EPSG:4326)</option>
            <option value="">赤道 (EPSG:4326)</option>
          </select>
        </div>
        <div class="pop-title">对象 (点, 线, 区域)</div>
        <div class="pop-list">
          单位: 长度
          <select name="" style="width: 52px">
            <option value="">Km</option>
          </select>
          面积
          <select name="" style="width: 52px">
            <option value="">km²</option>
          </select>
        </div>
        <div class="pop-list">
          <a-checkbox @change="onChange"
            >将图例添加到新对象</a-checkbox
          >
        </div>
        <div class="pop-list">
          <a-checkbox @change="onChange">在创建过程中显示提示</a-checkbox>
        </div>
        <div class="pop-list">
          最小图形高程:<a-input placeholder="请输入" size="small" />m
          (留空以禁用限制)
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="addlayer"
      width="900px"
      top="4vh"
      :show-close="true"
    >
      <div class="pop-box" v-show="!infoshow">
        <div class="pop-title">
          <a-icon type="file-text" style="margin-right: 20px" />目录
        </div>
        <div class="pop-cont">
          <div class="left">
            <div class="left-title">过滤</div>
            <div class="left-text">自由文本 搜索</div>
            <div class="left-input">
              <input type="text" placeholder="自由文本" />
            </div>
            <div class="left-collection">
              收藏<a-icon
                type="star"
                theme="filled"
                style="margin: 0 3px 0 5px"
              />0
            </div>
            <div class="left-list" v-for="(item, index) in list" :key="index">
              <div class="left-list-title" @click="item.show = !item.show">
                {{ item.title
                }}<a-icon
                  :type="item.show ? 'caret-up' : 'caret-down'"
                  theme="filled"
                  style="margin-left: 5px"
                />
              </div>
              <div v-show="item.show">
                <div
                  class="list-item"
                  v-for="(itm, ink) in item.oplist"
                  :key="ink"
                >
                  {{ itm.name }}<span>{{ itm.num }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="right-title">产品 <span>176</span></div>
            <div class="right-list" v-for="(item, index) in list2" :key="index">
              <div class="right-list-img">
                <img src="../assets/img2.png" alt="" />
              </div>
              <div class="right-list-cont">
                <div class="top-div">
                  <div class="top-div-left">
                    Global Ocean 1/12° Physics Analysis and Forecast updated
                    Daily <span>45</span> <a-icon type="project" />
                  </div>
                  <div class="top-div-right" @click="item.state = !item.state">
                    <a-icon type="star" v-if="!item.state" />
                    <a-icon
                      type="star"
                      theme="filled"
                      style="color: #0278ff"
                      v-else
                    />
                  </div>
                </div>
                <div class="text-div">
                  The Operational Mercator global ocean analysis and forecast
                  system at 1/12 degree is providing 10 days of 3D global ocean
                  forecasts updated daily. The time series start on January 1st,
                  2016 and is aggregated in time in order to reach a two full
                  year’s time series sliding window.
                </div>
                <div class="btn-view">
                  <div id="Details" @click="infoshow = true">详情</div>
                  <div class="addbtn">添加到地图...</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pop-box" v-show="infoshow">
        <div class="pop-title">
          <a-icon
            type="left"
            style="margin-right: 20px; cursor: pointer"
            @click="infoshow = false"
          />
          Global Ocean 1/12° Physics Analysis and Forecast updated Daily
        </div>
        <div class="pop-info">
          <div class="left">
            <div class="left-img">
              <img src="../assets/img2.png" alt="" />
            </div>
            <div class="left-text">Temporal extent 1 January 2019</div>
            <div class="left-text">Lat extent -90° to 90°</div>
            <div class="left-text">Lon extent -180° to 180°</div>
            <div class="left-btn"><div class="addbtn">添加到地图...</div></div>
          </div>
          <div class="right">
            <div class="right-title">Abstract <a-icon type="star" /></div>
            <div class="right-text">
              The Operational Mercator global ocean analysis and forecast system
              at 1/12 degree is providing 10 days of 3D global ocean forecasts
              updated daily. The time series start on January 1st, 2016 and is
              aggregated in time in order to reach a two full year’s time series
              sliding window. This product includes daily and monthly mean files
              of temperature, salinity, currents, sea level, mixed layer depth
              and ice parameters from the top to the bottom over the global
              ocean. It also includes hourly mean surface fields for sea level
              height, temperature and currents. The global ocean output files
              are displayed with a 1/12 degree horizontal resolution with
              regular longitude/latitude equirectangular projection. 50 vertical
              levels are ranging from 0 to 5500 meters. This product also
              delivers a special dataset for surface current which also includes
              wave and tidal drift called SMOC (Surface merged Ocean Current).
              DOI (product) : https://doi.org/10.48670/moi-00016
            </div>
            <div class="right-title">Classification</div>
            <div
              class="right-item"
              v-for="(item, index) in itemlist"
              :key="index"
            >
              <div class="right-item-label">{{ item.name }}</div>
              <div class="right-item-value">{{ item.value }}</div>
            </div>
            <div class="right-title">Contacts</div>
            <div class="right-item">
              <div class="right-item-label">Point of Contact</div>
              <div class="right-item-value">
                <a-icon type="mail" /><span
                  >Copernicus Marine Service Desk</span
                >
              </div>
            </div>
            <div class="right-title2" @click="contetshow = !contetshow">
              Raw metadata<a-icon
                :type="contetshow ? 'caret-up' : 'caret-down'"
              />
            </div>
            <div v-if="contetshow">{{ contet }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import maplayer from "../components/mapLayer.vue";
import toolbar from "../components/toolbar.vue";
import timeAxis from "../components/timeAxis.vue";
export default {
  name: "home",
  components: { maplayer, toolbar, timeAxis },
  data() {
    return {
      dialogexamine: false,
      show: true,
      showtime: true,
      addlayer: false, // addlayer 弹窗状态
      list: [
        {
          title: "银河系",
          show: true,
          oplist: [
            { name: "蓝色海洋", num: "91" },
            { name: "白色海洋", num: "32" },
            { name: "绿色海洋", num: "80" },
          ],
        },
        {
          title: "银河系",
          show: true,
          oplist: [
            { name: "蓝色海洋", num: "91" },
            { name: "白色海洋", num: "32" },
            { name: "绿色海洋", num: "80" },
          ],
        },
        {
          title: "银河系",
          show: true,
          oplist: [
            { name: "蓝色海洋", num: "91" },
            { name: "白色海洋", num: "32" },
            { name: "绿色海洋", num: "80" },
          ],
        },
        {
          title: "银河系",
          show: true,
          oplist: [
            { name: "蓝色海洋", num: "91" },
            { name: "白色海洋", num: "32" },
            { name: "绿色海洋", num: "80" },
          ],
        },
      ],
      list2: [
        { state: false },
        { state: false },
        { state: false },
        { state: false },
        { state: false },
        { state: false },
        { state: false },
        { state: false },
      ],
      infoshow: false,
      itemlist: [
        { name: "Product ID", value: "GLOBAL_ANALYSIS_FORECAST_PHY_001_024" },
        { name: "Published", value: "14 October 2016" },
        { name: "Originating centre", value: "Mercator Océan (France)" },
        { name: "Area", value: "Global Ocean" },
        { name: "Time", value: "Future·Present·Past" },
        { name: "Universe", value: "White Ocean · Blue Ocean" },
        {
          name: "Main variables",
          value: "Current velocitySalinitySea iceSea surface heightTemperature",
        },
        {
          name: "Community",
          value:
            "Polar environment monitoringPolicies, governance & mitigationEducation, public health & recreationScience & innovationExtremes, hazards & safetyCoastal servicesNatural resources & energyTrade & marine navigation",
        },
        { name: "Source", value: "Numerical models" },
        { name: "Processing level", value: "Level 4" },
      ],
      contet: `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
			<csw:GetRecordByIdResponse xmlns:csw="http://www.opengis.net/cat/csw/2.0.2">
			<gmd:MD_Metadata xmlns:gmd="http://www.isotc211.org/2005/gmd" xmlns:gco="http://www.isotc211.org/2005/gco" xmlns:srv="http://www.isotc211.org/2005/srv" xmlns:gmx="http://www.isotc211.org/2005/gmx" xmlns:gts="http://www.isotc211.org/2005/gts" xmlns:gsr="http://www.isotc211.org/2005/gsr" xmlns:gmi="http://www.isotc211.org/2005/gmi" xmlns:gml="http://www.opengis.net/gml/3.2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:geonet="http://www.fao.org/geonetwork">
				<gmd:fileIdentifier>
				<gco:CharacterString>eec7a997-c57e-4dfa-9194-4c72154f5cc5</gco:CharacterString>
				</gmd:fileIdentifier>
				<gmd:language xmlns:date="http://exslt.org/dates-and-times">
				<gmd:LanguageCode codeList="http://www.loc.gov/standards/iso639-2/" codeListValue="eng"/>
				</gmd:language>
				<gmd:characterSet xmlns:date="http://exslt.org/dates-and-times">
				<gmd:MD_CharacterSetCode codeListValue="utf8" codeList="http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_CharacterSetCode"/>
				</gmd:characterSet>
				<gmd:hierarchyLevel xmlns:date="http://exslt.org/dates-and-times">
				<gmd:MD_ScopeCode codeList="http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_ScopeCode" codeListValue="series"/>
				</gmd:hierarchyLevel>
				<gmd:hierarchyLevelName xmlns:date="http://e`,
      contetshow: false,
    };
  },
  mounted() {
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      79.5,
      10.4,
      120.4,
      71.2
    );
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5MTljZWQyZC04NDQ3LTQ3NzgtOGIyMC1kNjE0NDRlNmJmMDAiLCJpZCI6Mzg3Miwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTUzOTEzMzU4Mn0.JbKtxqbGmxw8w_2qOIZW6uKU_jcZCiahOK2ROdttO90";

    var viewer = new Cesium.Viewer("cesiumContainer", {
      //scene3DOnly: true,
      sceneMode: Cesium.SceneMode.SCENE3D,
      shouldAnimate: false,
      baseLayerPicker: false,
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: "http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5b79423f82f9d691ff2608e24296f617",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true,
        maximumLevel: 18,
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      }),
      /*
				orderIndependentTranslucency: false,
				contextOptions: {
					webgl: {
						alpha: true,
					}
				},
				 
				terrainProvider: Cesium.createWorldTerrain({
					requestWaterMask: true,
					requestVertexNormals: true
				}),
				*/
      /*
				
				skyBox: new Cesium.SkyBox({
					sources: {
						positiveX: 'static/img/map/skybox/00h+00.jpg',
						negativeX: 'static/img/map/skybox/12h+00.jpg',
						positiveY: 'static/img/map/skybox/06h+00.jpg',
						negativeY: 'static/img/map/skybox/18h+00.jpg',
						positiveZ: 'static/img/map/skybox/06h+90.jpg',
						negativeZ: 'static/img/map/skybox/06h-90.jpg',
					}
				}),*/
      terrainExaggeration: 2.0,
      requestRenderMode: true,
      maximumRenderTimeChange: Infinity,
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
    });
    viewer._cesiumWidget._creditContainer.style.display = "none";

    //console.info("dddddddddddddddddddddddddddddddddddddddddddddddd");

    //是否开启抗锯齿
    viewer.scene.fxaa = false;
    viewer.scene.postProcessStages.fxaa.enabled = true;
    //this.viewer.scene.globe.show = true; //不显示地球，这条和地球透明度选一个就可以
    // 判断是否支持图像渲染像素化处理
    if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      viewer.resolutionScale = window.devicePixelRatio;
    }
    ///////////////////////////////自定义图层///////////////////////////////////////////////////
    var data_layer = new Cesium.TileCoordinatesImageryProvider({
      tilingScheme: new Cesium.GeographicTilingScheme(),
    });
    data_layer.requestImage = function (x, y, level) {
      var canvas = document.createElement("canvas");
      canvas.width = 256;
      canvas.height = 256;
      var context = canvas.getContext("2d");
      context.strokeStyle = "rgba(192,192,192,0.7)";
      context.lineWidth = 1;
      context.strokeRect(0, 0, 256, 256);
      var label = level + " " + x + " " + y + ""; //label里面放需要显示的文字
      context.font = "bold 26px Arial";
      context.fillStyle = "rgba(255, 255, 255, 0.6)";
      context.textAlign = "center";
      context.fillText(label, 124, 124);
      return canvas;
    };
    viewer.scene.imageryLayers.addImageryProvider(data_layer);

    data_layer.pickFeatures = function (
      x,
      y,
      level,
      longitude,
      latitude
    ) {
      // var interval = 180.0 / Math.pow(2, level);
      // var lon = (x + 0.5) * interval - 180;
      // var lat = 90 - (y + 0.5) * interval;
      // var step = 0.5 * interval;

      // var labelLevel = "L:" + level;
      // var labelLonMin = "Lo:" + (lon - step);
      // var labelLatMin = "La:" + (lat - step);
      // var labelLonMax = "Lo:" + (lon + step);
      // var labelLatMax = "La:" + (lat + step);

      console.info(x,y,level,longitude,latitude); 

     
    };
    /////////////////////////////////自定义图层/////////////////////////////////////////////////////////
    //
    window["viewer"] = viewer;
  },
  methods: {
    onadd() {
      this.addlayer = true;
    },
    onChange() {},
    handleMenuClick(e) {
      console.log(e);
    },
    onset(e) {
      this.dialogexamine = true;
    },
  },
};
</script>
<style scoped lang="less">
#cesiumContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
}
// @keyframes transform{
//   0%{left:0 }
//   100%{left: 412px;}
// }
// @keyframes transforms{
//   0%{left:0 }
//   100%{left: 412px;}
// }
@keyframes transformu {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes transformd {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.box {
  // min-width: 1200px;
  height: 100%;
  position: relative;
}
.cont-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 19.2rem;
  height: 100%;
  z-index: -1;
  img {
    width: 100%;
    height: 100%;
  }
}
.set-div {
  position: absolute;
  top: 33px;
  left: 0;
  display: flex;
  .set-div-left {
    position: absolute;
    left: 0px;
    top: 0;
    z-index: 99;
    padding-top: 10px;
    transition: left 310ms, top 300ms;
    // animation: transform 0.3s linear forwards;
    div {
      // width: 32px;
      // height: 32px;
      width: 25px;
      height: 40px;
      border-left: 25px solid #e2e2e2;
      // border-top: 25px solid transparent;
      // border-bottom: 25px solid transparent;
      // background-color: #98f8ff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      i {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        font-weight: 500;
        color: black;
      }
    }
  }
  .set-div-right {
    position: absolute;
    left: 0;
    top: 0;
    transition: left 300ms, top 300ms;
  }
}
#inshow {
  left: -400px;
  // display: none;s
}
#active {
  left: 0;
  // left: 0px;
  // animation: transforms 0.3s linear forwards;
}
.toolbar-box {
  position: fixed;
  bottom: 42px;
  right: 0;
  width: 83px;
  overflow-x: hidden;
  z-index: var(--z-toolbox);
  -webkit-transition: bottom 300ms, right 300ms ease-in-out;
  transition: bottom 300ms, right 300ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.pop-content {
  width: 100%;
  height: 480px;
  padding: 14px 40px 0 19px;
  box-sizing: border-box;
  .pop-top {
    width: 100%;
    height: 28px;
    font-size: 26px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    i {
      margin-right: 10px;
      color: #999999;
      font-size: 28px;
    }
  }
  .pop-title {
    width: 100%;
    height: 29px;
    line-height: 29px;
    font-size: 16px;
  }
  .pop-input {
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    input {
      width: 180px;
      margin-right: 5px;
    }
  }
  .pop-Session {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 16px;
    height: 25px;
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 10px;
    div {
      width: 57px;
      height: 25px;
      border: 1px solid #767676;
      text-align: center;
      margin-right: 4px;
      background-color: #efefef;
    }
    span {
      color: #a7a7a7;
      margin-left: 4px;
    }
  }
  .pop-list {
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 5px;
    input {
      width: 74px;
    }
  }
}

.timeAxis {
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 45px;
  transition: all 300ms ease-in-out;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
}
// .timebtn{
// 	width: 50px;
// 	height: 28px;
// 	background-color: #e2e2e2;
// 	margin-left: 42px;
// 	margin-top: 10px;
// 	border-radius: 13px;
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// 	i{
// 		font-size: 16px;
// 	}
// }
.showdiv {
  // width: 32px;
  // height: 32px;
  // background-color: #98f8ff;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  cursor: pointer;
  animation: transformu 0.3s linear forwards;
  position: absolute;
  left: 5px;
  bottom: 20px;
  z-index: 999;
  width: 50px;
  height: 28px;
  background-color: #e2e2e2;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#actives {
  animation: transformd 0.3s linear forwards;
}
.show-box {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: left 300ms, bottom 300ms;
}
#show-box-active {
  position: absolute;
  bottom: -300px;
  left: 0;
}
.pop-box {
  width: 100%;
  height: 90vh;
  background-color: #e3e3e3;
  padding: 15px 20px 0 25px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  .pop-title {
    width: 100%;
    display: flex;
    align-items: center;
    height: 37px;
    font-size: 22px;
    i {
      font-size: 22px;
    }
  }
  .pop-cont {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: 28px;
    .left {
      width: 277px;
      .left-title {
        width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 19px;
      }
      .left-text {
        width: 100%;
        height: 21px;
        font-size: 12px;
        color: #a29999;
        margin-top: 26px;
      }
      .left-input {
        width: 100%;
        margin-top: 2px;
        height: 26px;
        input {
          height: 26px;
          width: 100%;
          border: 1px solid #767676;
          padding-left: 5px;
          border-radius: 3px;
          background-color: #fff;
        }
      }
      .left-collection {
        width: 100%;
        margin-top: 24px;
        line-height: 20px;
        font-size: 12px;
        color: #a29999;
        margin-bottom: 26px;
      }
      .left-list {
        margin-bottom: 25px;
        .left-list-title {
          width: 100%;
          line-height: 18px;
          font-size: 12px;
          color: #a29999;
          cursor: pointer;
        }
        .list-item {
          line-height: 20px;
          font-size: 12px;
          margin-bottom: 2px;
          span {
            color: #a29999;
            margin-left: 5px;
          }
        }
      }
    }
    .right {
      width: 546px;
      // padding-right: 30px;
      .right-title {
        width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 19px;
        margin-bottom: 20px;
        span {
          color: #999999;
        }
      }
      .right-list {
        width: 100%;
        height: 214px;
        padding: 20px;
        box-shadow: 10px 10px 33px #ccc, -10px -10px 33px #fafafa;
        background-color: #e3e3e3;
        border-radius: 15px;
        margin-bottom: 6px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        .right-list-img {
          width: 138px;
          img {
            width: 138px;
            height: 138px;
            border-radius: 5px;
          }
        }
        .right-list-cont {
          width: 336px;
          .top-div {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            padding: 3px 0 8px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 8px;
            .top-div-left {
              width: 290px;
              color: #111111;
              font-weight: 500;
              line-height: 20px;
              font-size: 15px;
              span {
                color: #999999;
              }
            }
            .top-div-right {
              i {
                line-height: 20px;
                font-size: 18px;
                margin-top: 3px;
                cursor: pointer;
              }
            }
          }
          .text-div {
            font-size: 12px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          .btn-view {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
            margin-top: 20px;
            div {
              height: 36px;
              line-height: 36px;
              text-align: center;
              padding: 0 26px;
              box-sizing: border-box;
              font-size: 19px;
              border-radius: 3px;
              background-color: #0278ff;
              color: #fff;
              margin-left: 26px;
              font-size: 16px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
#Details {
  background-color: #bbbbbb;
  color: #111111;
}
#Details:hover {
  background-color: rgba(187, 187, 187, 0.8);
}
.pop-info {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-right: 20px;
  box-sizing: border-box;
  .left {
    width: 200px;
    padding-top: 28px;
    .left-img {
      width: 178px;
      height: 178px;
      margin-bottom: 8px;
      img {
        width: 178px;
        height: 178px;
        border-radius: 6px;
      }
    }
    .left-text {
      font-size: 16px;
      color: #111111;
      line-height: 20px;
    }
    .left-btn {
      margin-top: 15px;
      display: flex;
    }
  }
  .right {
    width: 610px;
    // padding-top: 28px;
    .right-title {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      padding-bottom: 8px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      font-size: 19px;
      color: #111111;
      margin-top: 28px;
    }
    .right-title2 {
      display: flex;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      font-size: 19px;
      color: #111111;
      margin-top: 28px;
      cursor: pointer;
      i {
        margin-left: 5px;
      }
    }
    .right-text {
      font-size: 15px;
      color: #111111;
      font-family: sans-serif;
    }
    .right-item {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      margin-top: 2px;
      div {
        line-height: 25px;
        font-size: 16px;
        color: #111111;
      }
      .right-item-label {
        width: 180px;
      }
      .right-item-value {
        width: 423px;
        i {
          font-size: 16px;
          color: #999;
          cursor: pointer;
          margin-right: 5px;
        }
        span {
          color: #999;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }
}
.addbtn {
  height: 36px;
  line-height: 36px;
  text-align: center;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 19px;
  border-radius: 3px;
  background-color: #0278ff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.addbtn:hover {
  background-color: rgba(36, 136, 251, 0.9);
}
</style>
